import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { Spin } from "antd"
import classnames from "classnames"
import { toJS } from "mobx"

import TrendChart from "./components/TrendChart/index.js"
import EnergyChart from "./components/EnergyChart/index.js"
import styles from "./index.less"

@inject("ScreenStore")
@observer
@cssModules(styles)
class Electricity extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  async componentWillMount() {
    const { getElectricity, getEnergyConservationData } = this.store
    getEnergyConservationData()
    await getElectricity()
    let speed = 10000
    const marquee = () => {
      const {
        electricity,
        getChart,
        chartCount,
        electricityLoadding,
      } = this.store
      let i = chartCount
      if (electricityLoadding) return
      let electricitType = (electricity && electricity.electricitys) || []
      i++
      let num = i % electricitType.length
      const item = electricitType[num]
      item &&
        getChart({
          spId: item.spId,
          deviceId: item.deviceId,
          chartCount: num,
        })
    }
    this.timer = setInterval(marquee, speed)
    this.root.onmouseover = () => {
      clearInterval(this.timer)
    }
    this.root.onmouseout = () => {
      this.timer = setInterval(marquee, speed)
    }
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }
  render() {
    const {
      electricity,
      electricityLoadding,
      chart,
      getChart,
      chartCount,
      setChartCount,
      energyConservationData,
    } = this.store
    let electricitType = (electricity && electricity.electricitys) || []
    let sum = electricitType.reduce((prev, cur, index, arr) => {
      return prev + parseFloat(cur.value)
    }, 0)
    const energySum =
      energyConservationData.airConditionerValue +
      energyConservationData.electricityValue

    return (
      <div styleName="container-bg">
        <div
          styleName="container"
          ref={(c) => {
            this.root = c
          }}
        >
          <div styleName={"title-container"}>
            <div styleName={"title-selected"} />
            <div styleName={"title"}>能耗分析</div>
          </div>
          <div styleName={"left-wrap"}>
            <div styleName={"legend"}>
              <div styleName={"fresh-air-system"}>
                <span styleName={"green-square"} />
                <span>新风系统节能</span>
              </div>
              <div styleName={"power-energy"}>
                <span styleName={"blue-square"} />
                <span>下电管理节能</span>
              </div>
            </div>

            <div styleName={"energy-saving-ratio"}>
              <EnergyChart energyConservationData={energyConservationData} />
              {/* <div
                styleName={"fresh-ratio"}
                style={{ height: `${airConditionerValue}%` }}
              >
                <span>{`${airConditionerValue}%`}</span>
              </div>
              <div
                styleName={"power-ratio"}
                style={{ height: `${100 - airConditionerValue}%` }}
              >
                <span>{`${100 - airConditionerValue}%`}</span>
              </div> */}
            </div>
            <div styleName={"title-and-value"}>
              <span styleName={"title"}>总节约能耗</span>
              <span styleName={"value"}>{`${
                isNaN(energySum.toFixed(2)) ? 0 : energySum.toFixed(2)
              }kw`}</span>
            </div>
          </div>
          <div styleName={"center-wrap"}>
            {electricitType.map((item, i) => {
              const value =
                sum === 0 ? 0 : ((item.value / sum) * 100).toFixed(1)
              return (
                <div
                  key={i.toString(36) + i}
                  styleName={"electricit-type-item"}
                  onClick={(e) => {
                    if (i === chartCount) return

                    console.log(i)
                    getChart({
                      spId: item.spId,
                      deviceId: item.deviceId,
                      chartCount: i,
                    })
                    setChartCount(i)
                  }}
                >
                  <div
                    className={classnames(
                      styles["decoration-bg"],
                      i === chartCount && styles["selected"]
                    )}
                  >
                    <div styleName={"angle-left-top"} />
                    <div styleName={"angle-right-top"} />
                    <div styleName={"angle-left-bottom"} />
                    <div styleName={"angle-right-bottom"} />
                    <div styleName={"bg"} />
                    <div styleName={"divider"} />
                  </div>
                  <div styleName={"text-wrap"}>
                    <div styleName={"name"}>{item.spName}</div>
                    <div styleName={"num"}>
                      <div styleName={"percentage"}>{`${
                        isNaN(value) ? 0 : value
                      }%`}</div>
                      <div styleName={"kwh"}>
                        {item.value + " " + (item.unit ? item.unit : "kwh")}
                      </div>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
          <div styleName={"divider"} />
          <div styleName={"right-wrap"}>
            <Spin spinning={electricityLoadding}>
              <div>{chart.max && <TrendChart data={chart} />}</div>
            </Spin>
          </div>
        </div>
      </div>
    )
  }
}

export default Electricity
